import React from 'react';
import {connect} from 'dva';
import {Table, Row, Col, Form, Input, Radio, DatePicker, Button} from 'antd';
import RightConstants from '../../../utils/RightConstants';
import Constants from '../../../utils/Constants';
import EditOutbuy from '../../../components/outbuy/components/EditOutbuy';
import RightBox from "../../../components/commons/RightBox";
import OperatorConstant from "../../../utils/OperatorConstant";

const R = require('ramda');
const dateFormat = 'YYYY-MM-DD';
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;



export default connect(({outbuyProvider}) => ({outbuyProvider}))(
    Form.create()(class outbuyApproval extends React.Component {

        constructor(props) {
            super(props);
        }

        componentDidMount() {
            this.props.dispatch({ type: 'outbuyProvider/queryBuyerApprovalList', payload: { status: "2", page: Constants.DEFAULT_PAGE } });
        }


        handleResetFields = () => {
            if(this.editOutbuy)this.editOutbuy.handleResetFields();
        }



        handleOpen = (type, record) => {
            var providerId = record && record.providerId ? record.providerId : null;
            if(providerId){
                this.props.dispatch({
                    type: 'outbuyProvider/getById',
                    payload: {id: providerId}
                })
            }

            this.editOutbuy.handleOpen(type, record.id, true);
        }


        handleSearch = (flag) => {
            let values = this.props.form.getFieldsValue();
            let newPage = this.props.outbuyProvider.page;
            newPage.page = flag ? newPage.page : 1;

            this.props.dispatch({
                type: 'outbuyProvider/queryBuyerApprovalList',
                payload: {
                    ...values,
                    page: newPage
                }
            });
        };



        columns = [
            {title: '供应商编码', dataIndex: 'providerNo', key: 'providerNo'},

            {title: '供应商名称', dataIndex: 'name', key: 'name',},

            {title: '风控经理', dataIndex: 'fkmanagerName', key: 'fkmanagerName'},

            {title: '创建时间', dataIndex: 'createtime', key: 'createtime'},

            {title: '操作', key: 'key_oprator',
                render: (text, record, index) => {

                    let  approvalBtn = <RightBox resource={RightConstants.SUPPLIER.APPROVAL_COMMODITYSUPPLIERS}><a href="#" onClick={this.handleOpen.bind(this, OperatorConstant.approval, record)}>审核</a></RightBox>


                    let viewBtn = R.contains(record.status, ["3", "4", "5"]) ?
                            <span>
                                 <a href="#" onClick={this.handleOpen.bind(this, 'approvalView', record)}>查看</a>
                            </span>
                        :"";

                    return (
                        <span>
                            {record.status === "2" ? approvalBtn : ''}
                            {viewBtn}
                        </span>
                    );
                }
            }];

        render() {
            const { getFieldDecorator } = this.props.form;
            let formItemLayout = {
                labelCol: { xs: { span: 24 }, sm: { span: 6 } },
                wrapperCol: { xs: { span: 24 }, sm: { span: 14 } }
            };
            let values = this.props.form.getFieldsValue();

            let pagination = {
                showTotal: total => `共 ${total} 条数据`,
                pageSize: this.props.outbuyProvider.page.size,
                total: this.props.outbuyProvider.page.totalRow,
                showSizeChanger: true,
                current:this.props.outbuyProvider.page.page,
                onShowSizeChange: (current, size) => {
                    let newPage = this.props.outbuyProvider.page;
                    newPage.size = size;
                    newPage.page = 1;
                    this.props.dispatch({
                        type: 'outbuyProvider/queryBuyerApprovalList',
                        payload: {
                            ...values,
                            page: newPage
                        }
                    });
                },
                onChange: (pageNumber, pageSize) => {
                    let newPage = this.props.outbuyProvider.page;
                    newPage.page = pageNumber;
                    this.props.dispatch({
                        type: 'outbuyProvider/queryBuyerApprovalList',
                        payload: {
                            ...values,
                            page: newPage
                        }
                    });
                },
            }

            return (
                <div>
                    <Form>
                        <Row>
                            <Col span={7}><FormItem {...formItemLayout} label={'供应商名称'}>{getFieldDecorator('providerName')(<Input/>)}</FormItem></Col>
                            <Col span={7}><FormItem {...formItemLayout} label={'客户名称'}>{getFieldDecorator('cstName')(<Input/>)}</FormItem></Col>
                        </Row>

                        <Row>
                            <Col span={7}>
                                <FormItem {...formItemLayout} label={'状态'}>
                                    {getFieldDecorator('status', {
                                        initialValue: "2"
                                    })(

                                        <RadioGroup style={{width: 800}}>
                                            <Radio value="2">待审核</Radio>
                                            <Radio value="3">待补充资料</Radio>
                                            <Radio value="4">审核通过</Radio>
                                            <Radio value="5">审核不通过</Radio>
                                        </RadioGroup>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={7} style={{float: 'right'}}>
                                <Button type="primary" icon="search" style={{marginRight: 5}} onClick={this.handleSearch.bind(this)}>查询</Button>
                            </Col>
                        </Row>

                    </Form>
                    
                    <Table rowKey="id" dataSource={this.props.outbuyProvider.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination}/>

                    <EditOutbuy wrappedComponentRef={(inst) => this.editOutbuy = inst} dataSource={this.props.outbuyProvider.dataSource} handleSearch = {() => this.handleSearch(true)} />
                </div>
            )
        }
    })


)
